<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
</head>
<body>

<div id="app">
    <span v-once>{{ message}}</span>
    <div v-once>
        <span>{{ message }}</span>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * v-once不需要表达式，作用是定义它的元素或者组件只渲染一次，包括元素或组件的所有子节点。
     * 首次渲染后，不再随数据的变化而重新渲染，将被视为静态内容。
     *
     *
     * v-once在业务中很少使用，当你需要进一步优化性能时才会使用到！
     * **/


    var app = new Vue({
        el:"#app",
        data:{
            message:"这是一段文本",
        },
    });

</script>
</body>
</html>